 <template>
  <div>
    <div class="header">
      <el-row style="margin:0;">
        <el-col :span="12" class="logo">
          <div class="grid-content bg-purple logo-img">
            <i>
              <img src="../../../public/img/bg.jpg" alt />
            </i>
            丫丫商城后台管理系统
          </div>
        </el-col>
        <el-col :span="12" style="text-align:right">
          <div class="grid-content bg-purple-light">
            <!-- <el-button type="primary" plain>登录</el-button>
            <el-button type="primary" plain>注册</el-button>-->

            <!-- 下拉菜单 -->
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <span
                  style="color:#fc0;font-size:15px;margin-right:8px"
                  v-if="currentUser"
                  >HI!{{ currentUser.data[0].name }}</span
                >
                个人中心
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <!-- 对话框：修改密码 -->
            <el-dialog
              title="修改密码"
              :visible.sync="dialogFormVisible"
              width="450px"
              style="text-align:left;"
            >
              <el-form
                :rules="rules"
                :model="ruleForm"
                label-position="right"
                label-width="80px"
                class="demo-ruleForm"
                ref="ruleForm"
              >
                <!-- <el-form-item label="旧密码" prop="oldpsw">
                  <el-input
                    v-model="ruleForm.oldpsw"
                    autocomplete="off"
                    placeholder="请输入你的旧密码"
                    style="width:300px"
                    type="password"
                  ></el-input>
                </el-form-item> -->
                <el-form-item label="新密码" prop="newpsw">
                  <el-input
                    v-model="ruleForm.newpsw"
                    autocomplete="off"
                    style="width:300px"
                    placeholder="请输入你要设置的新密码"
                    type="password"
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkpsw">
                  <el-input
                    v-model="ruleForm.checkpsw"
                    autocomplete="off"
                    style="width:300px"
                    placeholder="请再次输入你要设置的新密码"
                    type="password"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editpsw">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { logOut, getUser } from "../../api/auth"; //引入cookie的方法
import userApi from "../../api/userApi";

export default {
  name: "App",
  data() {
    //功能：验证新密码
    var validatePass = (ruleForm, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
        this.$message({
          message: "请输入密码",
          type: "error"
        });
      } else {
        if (this.ruleForm.checkpsw !== "") {
          this.$refs.ruleForm.validateField("checkpsw");
        }
        callback();
      }
    };
    //功能：验证确认密码
    var validatePass2 = (ruleForm, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newpsw) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      currentUser: {},
      dialogFormVisible: false, //对话框的显示状态：false：不显示
      value: new Date(),
      ruleForm: {
        // oldpsw: "", //旧密码
        newpsw: "", //新密码
        checkpsw: "" //确认密码
      },
      userinf: {},
      rules: {
        //正则
        // oldpsw: [
        //   { required: true, message: "旧密码不能为空", trigger: "blur" }, //用户名不能为空
        //   { validator: validatePsw, trigger: "blur" } //验证用户名是否存在
        //   //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        // ],
        newpsw: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          // {
          //   min: 3,
          //   max: 15,
          //   message: "长度在 3 到 15 个字符",
          //   trigger: "blur"
          // }
          { validator: validatePass, trigger: "blur" }
        ],
        checkpsw: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },

  components: {},

  methods: {
    //功能：获取localStore中的信息
    getcurrentUser() {
      let currentUser = localStorage.getItem("currentUser");

      try {
        this.currentUser = JSON.parse(currentUser);
      } catch (err) {
        this.currentUser = {};
      }
    },

    //功能：下拉菜单的触发
    handleCommand(command) {
      // console.log(command);
      if (command == "edit") {
        //修改密码
        this.dialogFormVisible = true;
      } else if (command == "logout") {
        //退出
        // console.log("退出了");
        logOut(); //删除本地cookie的数据
        localStorage.removeItem("currentUser");
        this.currentUser = {};
        this.$message({
          message: "退出成功",
          type: "success",
          duration: 2000
        });

        //跳转到登陆页
        this.$router.push("/login");
      }
    },
    //功能：点击确定按钮，确定修改密码
    editpsw() {
      this.$refs.ruleForm.validate(async res => {
        // let data = {
        //   id: this.currentUser.data[0]._id,
        //   password: this.ruleForm.checkpsw
        // };
        if (res) {
          //表单正则校验通过：发送ajax进行密码的修改
          //获取：uid、username、新密码，传给接口
          await userApi
            .changepsw(this.currentUser.data[0]._id, this.ruleForm.checkpsw)
            .then(res => {
              console.log(res.data);
              if (res.data.code == 2000) {
                //修改成功
                this.dialogFormVisible = false;
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                //跳到登陆页
                this.$router.push("/login");
                //清除本地存储的用户信息
                logOut();
                localStorage.removeItem("currentUser");
                this.currentUser = {};
              } else {
                //修改失败
                this.$message({
                  message: "修改失败",
                  type: "error"
                });
              }
            });
        } else {
          return;
        }
      });
    },

    //关闭修改密码框清空信息
    closepsw() {
      this.ruleForm = {};
    }
  },
  //进入页面就获取用户信息
  created() {
    let userinf = getUser("xiaomi-user"); //字符串 {username:xxx,uid:xxx}
    // console.log(userinf);
    if (userinf) {
      this.userinf = JSON.parse(userinf);
      // this.userinf = JSON.stringify(userinf);
    }

    this.getcurrentUser();
  }
};
</script>

<style scoped lang="scss">
.header {
  background-color: #2d3a4b;
  width: 100%;
  height: 50px;
  .logo {
    font-size: 24px;
    color: #fc0;
    i {
      font-size: 40px;
      vertical-align: middle;
      margin-right: 5px;
      display: inline-block;
      width: 49px;
      height: 49px;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
.el-main {
  height: 100%;
}
.is-active {
  i {
    color: inherit !important;
    // inherit 继承父级颜色
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  line-height: 49px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown {
  float: right;
  padding-right: 20px;
  // margin-top: 17px;
  height: 49px;
}
</style>